Custom Validators তৈরি করা

Angular ফর্ম ব্যবহারের সময় আপনি Custom Validators তৈরি করে নির্দিষ্ট শর্তের উপর ভিত্তি করে ইনপুট ভ্যালিডেশন করতে পারেন। Ionic অ্যাপ্লিকেশনে ফর্ম ভ্যালিডেশন অনেক সময় Reactive Forms অথবা Template-Driven Forms ব্যবহৃত হয়। এখানে আমরা কাস্টম ভ্যালিডেটর তৈরি করার প্রক্রিয়া দেখব, যা আপনি আপনার ফর্মে ব্যবহার করতে পারবেন।

১. Custom Validators: বেসিক ধারণা

একটি কাস্টম ভ্যালিডেটর হলো একটি ফাংশন যা Angular এর AbstractControl অবজেক্ট গ্রহণ করে এবং একটি ভ্যালিডেশন অবজেক্ট রিটার্ন করে। এটি একটি null বা {} অবজেক্ট রিটার্ন করতে পারে, যা নির্দেশ করে যে ফিল্ডটি ভ্যালিড, অথবা একটি ত্রুটির অবজেক্ট রিটার্ন করে, যদি কিছু ভুল থাকে।

২. Custom Validator তৈরি করা

২.১ Custom Validator ফাংশন তৈরি করা

ধরা যাক, আমরা একটি কাস্টম ভ্যালিডেটর তৈরি করতে চাই যা নিশ্চিত করবে যে ইউজার যে পাসওয়ার্ডটি ইনপুট করছে, তা কমপক্ষে ৮টি অক্ষরের হতে হবে এবং অন্তত একটি সংখ্যা থাকতে হবে।

প্রথমে একটি কাস্টম ভ্যালিডেটর ফাংশন তৈরি করি:

import { AbstractControl, ValidationErrors, ValidatorFn } from '@angular/forms';

export function passwordValidator(): ValidatorFn {
  return (control: AbstractControl): ValidationErrors | null => {
    if (control.value) {
      const isValid = /^(?=.*[0-9])(?=.*[A-Za-z]).{8,}$/.test(control.value); // Min 8 characters with at least one number
      return isValid ? null : { 'passwordInvalid': true };
    }
    return null;
  };
}

এই ভ্যালিডেটরটি AbstractControl গ্রহণ করে এবং যদি পাসওয়ার্ড শর্তে পূর্ণ না হয় (৮টি অক্ষর এবং কমপক্ষে একটি সংখ্যা), তবে এটি একটি ত্রুটি অবজেক্ট { 'passwordInvalid': true } রিটার্ন করবে, অন্যথায় null রিটার্ন করবে।

২.২ Custom Validator ব্যবহার করা

এখন, আমরা এই কাস্টম ভ্যালিডেটরটি একটি ফর্ম কন্ট্রোলে ব্যবহার করব। উদাহরণস্বরূপ, একটি Reactive Form-এ পাসওয়ার্ড ফিল্ডের জন্য কাস্টম ভ্যালিডেটর ব্যবহার করা:

import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { passwordValidator } from './validators/password.validator'; // Import custom validator

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage {
  loginForm: FormGroup;

  constructor(private fb: FormBuilder) {
    this.loginForm = this.fb.group({
      password: ['', [Validators.required, passwordValidator()]], // Applying custom validator here
    });
  }

  onSubmit() {
    if (this.loginForm.valid) {
      console.log('Form Submitted', this.loginForm.value);
    } else {
      console.log('Form is invalid');
    }
  }
}

এখানে:

• passwordValidator() কাস্টম ভ্যালিডেটর ফাংশনটি ফর্ম কন্ট্রোলে ব্যবহৃত হয়েছে।
• Validators.required যুক্ত করা হয়েছে যাতে পাসওয়ার্ড ফিল্ডটি খালি না থাকে।

২.৩ Custom Validator এর ত্রুটি দেখানো

এখন, আপনি যদি ফর্মে কোনো ত্রুটি দেখতে চান, যেমন পাসওয়ার্ডটি অবৈধ হলে, আপনি এই ত্রুটিটি HTML টেমপ্লেটে দেখাতে পারেন:

<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" formControlName="password"></ion-input>
  </ion-item>
  <ion-text *ngIf="loginForm.get('password').hasError('passwordInvalid') && loginForm.get('password').touched">
    <p>Password must be at least 8 characters long and contain at least one number.</p>
  </ion-text>
  <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Submit</ion-button>
</form>

এখানে:

• hasError('passwordInvalid') চেক করা হচ্ছে পাসওয়ার্ডে যদি ত্রুটি থাকে।
• touched চেক করা হচ্ছে যে ফিল্ডটি ব্যবহারকারী দ্বারা স্পর্শ করা হয়েছে কিনা। এটি ত্রুটি শুধুমাত্র তখন দেখাবে যখন ফিল্ডটি স্পর্শ করা হবে এবং ত্রুটি দেখা যাবে।

৩. Multiple Custom Validators ব্যবহার করা

একই ফিল্ডে একাধিক কাস্টম ভ্যালিডেটর ব্যবহার করতে চাইলে, আপনি এটি একটি অ্যারে হিসেবে দিতে পারেন। উদাহরণস্বরূপ, পাসওয়ার্ড ফিল্ডের জন্য একাধিক ভ্যালিডেটর:

this.loginForm = this.fb.group({
  password: ['', [Validators.required, passwordValidator(), Validators.minLength(8)]],
});

এখানে, আমরা Validators.minLength(8) এর সাথে কাস্টম passwordValidator() যুক্ত করেছি।

৪. Template-driven Forms এ Custom Validator ব্যবহার

এছাড়া আপনি Template-driven Forms এও কাস্টম ভ্যালিডেটর ব্যবহার করতে পারেন। উদাহরণ:

৪.১ Template-driven Forms ফর্ম সেটআপ

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <ion-item>
    <ion-label position="floating">Password</ion-label>
    <ion-input type="password" name="password" ngModel [passwordValidator]></ion-input>
  </ion-item>
  <ion-text *ngIf="loginForm.controls['password'].hasError('passwordInvalid') && loginForm.controls['password'].touched">
    <p>Password must be at least 8 characters long and contain at least one number.</p>
  </ion-text>
  <ion-button expand="full" type="submit" [disabled]="!loginForm.valid">Submit</ion-button>
</form>

৪.২ Directive তৈরি করা (Template-driven Forms)

Template-driven ফর্মে কাস্টম ভ্যালিডেটর ব্যবহার করতে একটি Directive তৈরি করতে হবে:

import { Directive } from '@angular/core';
import { NG_VALIDATORS, AbstractControl } from '@angular/forms';
import { passwordValidator } from './password.validator';

@Directive({
  selector: '[passwordValidator]',
  providers: [{ provide: NG_VALIDATORS, useExisting: PasswordValidatorDirective, multi: true }]
})
export class PasswordValidatorDirective {
  validate(control: AbstractControl) {
    return passwordValidator()(control);
  }
}

এখন এই ডিরেকটিভটি আপনি টেমপ্লেটে ব্যবহার করতে পারবেন।

সারাংশ

• Custom Validators ব্যবহার করে আপনি ফর্মের ইনপুট ভ্যালিডেশন করতে পারেন।
• কাস্টম ভ্যালিডেটরগুলো AbstractControl অবজেক্ট গ্রহণ করে, এবং একটি ত্রুটি অবজেক্ট অথবা null রিটার্ন করে।
• Reactive Forms এবং Template-driven Forms এ কাস্টম ভ্যালিডেটর ব্যবহৃত হতে পারে।
• কাস্টম ভ্যালিডেটর দিয়ে পাসওয়ার্ড, ইমেইল, নাম্বার ইত্যাদি ভ্যালিডেশন চেক করা সম্ভব।

এই প্রক্রিয়া অনুসরণ করে আপনি আপনার Ionic অ্যাপে কাস্টম ভ্যালিডেটর তৈরি ও প্রয়োগ করতে পারবেন।